{% extends "base.html" %}

{% block content %}
<style>
/* 液态玻璃页面标题 */
.page-title {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}

.page-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.page-title h2 {
    color: #1C1C1E !important;
    text-shadow: 0 2px 4px rgba(0, 122, 255, 0.1);
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 1.5rem;
}

/* 液态玻璃卡片 */
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem !important;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

.card-header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: #1C1C1E !important;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.card-body {
    position: relative;
    z-index: 1;
    color: #1C1C1E !important;
}

/* 液态玻璃徽章 */
.badge {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
}

.badge:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* 液态玻璃按钮 */
.btn {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: var(--transition) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.btn-outline-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
}

.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

/* 液态玻璃代码块 */
.custom-pre {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    color: #1C1C1E !important;
    font-family: 'Courier New', monospace !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    overflow-x: auto !important;
    position: relative;
    overflow: hidden;
}

.custom-pre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-pre:hover::before {
    opacity: 1;
}

/* 信息文本样式 */
.info-text {
    color: #1C1C1E !important;
    font-weight: 500 !important;
}

.info-text strong {
    color: #1C1C1E !important;
    font-weight: 600 !important;
}

/* 操作按钮区域 */
.action-buttons {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}

.action-buttons::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.action-buttons .d-flex {
    position: relative;
    z-index: 1;
}

/* 暗色模式适配 */
[data-theme="dark"] .page-title {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .page-title::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .page-title h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .card {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .card-header {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .card-body {
    color: #ffffff !important;
}

[data-theme="dark"] .info-text {
    color: #ffffff !important;
}

[data-theme="dark"] .info-text strong {
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-secondary {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .custom-pre {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .custom-pre::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
}

[data-theme="dark"] .action-buttons {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .action-buttons::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}
</style>

<div class="container">
    <!-- 页面标题 -->
    <div class="page-title">
        <h2><i class="fas fa-file-alt me-2"></i>任务执行详情 - {{ task.name }}</h2>
    </div>
    
    <!-- 执行信息卡片 -->
    <div class="card">
        <div class="card-header">
            <i class="fas fa-info-circle me-2"></i>执行信息
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <p class="info-text"><strong><i class="fas fa-play me-1"></i>开始时间:</strong> {{ log.start_time.strftime('%Y-%m-%d %H:%M:%S') }}</p>
                </div>
                <div class="col-md-4">
                    <p class="info-text"><strong><i class="fas fa-stop me-1"></i>结束时间:</strong> {{ log.end_time.strftime('%Y-%m-%d %H:%M:%S') }}</p>
                </div>
                <div class="col-md-4">
                    <p class="info-text"><strong><i class="fas fa-stopwatch me-1"></i>持续时间:</strong> {% if log.duration is not none %}{{ "%.2f"|format(log.duration) }}秒{% else %}--{% endif %}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <p class="info-text"><strong><i class="fas fa-info-circle me-1"></i>状态:</strong> 
                    <span class="badge bg-{% if log.status == '成功' or log.status == 'success' %}success{% elif log.status == '失败' or log.status == 'error' %}danger{% else %}warning{% endif %}">
                        <i class="fas fa-{% if log.status == '成功' or log.status == 'success' %}check-circle{% elif log.status == '失败' or log.status == 'error' %}times-circle{% else %}exclamation-circle{% endif %} me-1"></i>
                        {{ '成功' if log.status == 'success' else '失败' if log.status == 'error' else log.status }}
                    </span>
                </p>
                </div>
                <div class="col-md-6">
                <p class="info-text"><strong><i class="fas fa-tag me-1"></i>日志类型:</strong> 
                    <span class="badge bg-{% if log.log_type == 'system_log' %}danger{% elif log.log_type == 'dingtalk_log' %}warning{% else %}info{% endif %}">
                        <i class="fas fa-{% if log.log_type == 'system_log' %}server{% elif log.log_type == 'dingtalk_log' %}robot{% else %}file-alt{% endif %} me-1"></i>
                        {{ '系统日志' if log.log_type == 'system_log' else '钉钉机器人日志' if log.log_type == 'dingtalk_log' else '脚本执行日志' }}
                    </span>
                </p>
            </div>
            </div>
        </div>
    </div>
    
    <!-- 执行日志卡片 -->
    <div class="card">
        <div class="card-header">
            <i class="fas fa-terminal me-2"></i>执行日志
        </div>
        <div class="card-body">
            <pre class="custom-pre" style="white-space: pre-wrap;">{{ log.log_content }}</pre>
        </div>
    </div>
    
    <!-- 操作按钮区域 -->
    <div class="action-buttons">
        <div class="d-flex justify-content-end">
        <a href="{{ url_for('task_logs_page', task_id=task.id) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>返回日志列表
        </a>
        </div>
    </div>
</div>
{% endblock %}